<template>
  <a-drawer
    :visible="modalVisible"
    @close="handleClose"
    :width="375"
    :body-style="{ paddingBottom: '80px'}"
    :destroyOnClose = false
    :title="title"
  >
    <a-list item-layout="horizontal" :data-source="list">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a slot="actions" @click="handleDelete(item.Id)"><a-icon type="close"/></a>
        <a-list-item-meta
          :description="item.Description"
        >
          <a slot="title">{{ item.Province }}</a>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-drawer>
</template>

<script>
import { getByProvince, deleteById } from '../../service/service';

export default {
  name: 'ProductListModal',
  props: {
    modalVisible: {
      type: Boolean,
      default: false
    },
    handleClose: Function,
    province: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      hasDelete: false
    };
  },
  computed: {
    title() {
      return `产品列表 - ${this.province}`;
    }
  },
  methods: {
    handleDelete(id) {
      const self = this;
      this.$confirm({
        title: '警告',
        content: '确定删除当前选项',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return new Promise((resolve, reject) => {
            deleteById(id).then((res) => {
              const { status } = res.data;
              if (status) {
                const index = self.list.findIndex((value) => {
                  return value.Id === id;
                });
                self.list.splice(index, 1);
                self.hasDelete = true;
              }
              resolve(res);
            }).catch((err) => {
              reject(err);
            });
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
    }
  },
  watch: {
    //
    modalVisible: {
      handler(val) {
        if (val) {
          getByProvince(this.province).then((res) => {
            const { data } = res.data;
            this.list = data;
          });
        } else {
          this.$emit('has-delete');
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>

</style>
